<template>
  <div id="homeMenus">
    <div class="grid-mark-header">
      <div class="vertical"></div>
      <span class="txt">快捷功能</span>
      <div style="display: flex; flex-flow: row">
        <span class="el-icon-arrow-left" style="cursor: pointer; font-size: 16px" @click="ontab(2)"> </span>
        <div class="tarbar" id="tarbar">
          <template v-for="(item, index) in menuList">
            <span :key="item.id + ''" v-if="item.status" @click="ontab(0, item.id)" :id="'tarbar_' + item.id">
              <span style="cursor: pointer" :class="{ 'active-color': activeIndex == item.id }"> {{ item.name }}</span>
              <span v-if="index != menuList.length - 1">&nbsp; &nbsp;|&nbsp; &nbsp; </span>
            </span>
          </template>
          &nbsp;
        </div>
        <span class="el-icon-arrow-right" style="cursor: pointer; font-size: 16px" @click="ontab(1)"> </span>
      </div>
    </div>
    <ul>
      <template v-for="(item, index) in menu">
        <li :key="index" @click="onpush(item)" v-if="item.status">
          <img :src="item.imgurl" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
import common from "../mixins/common";
import webUrl from "@/config/otherLink";
export default {
  mixins: [common],
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      RoleAuthority: (state) => state.common.RoleAuthority,
      uif: (state) => state.common.uif,
    }),
  },
  data() {
    return {
      menuList: [
        {
          id: "1",
          imgurl: "",
          name: "人力资源",
          AuthorityName: "人力资源",
          status: true,
          children: [
            {
              id: "1-1",
              imgurl: require("@/assets/images/homeImages/yghmc.png"),
              name: "员工花名册",
              AuthorityName: "员工花名册",
              status: true,
              url: "/employeeList",
              parentid: "1",
            },
            {
              id: "1-2",
              imgurl: require("@/assets/images/homeImages/blrz.png"),
              name: "办理入职",
              AuthorityName: "入职管理",
              status: true,
              url: "/induction",
              parentid: "1",
            },
            {
              id: "1-3",
              imgurl: require("@/assets/images/homeImages/bldd.png"),
              name: "办理调动",
              AuthorityName: "调动管理",
              status: true,
              url: "/redeploy",
              parentid: "1",
            },
            {
              id: "1-4",
              imgurl: require("@/assets/images/homeImages/dxtx.png"),
              name: "员工定薪调薪",
              status: true,
              url: "/employeeCompensation",
              parentid: "1",
            },
            {
              id: "1-5",
              imgurl: require("@/assets/images/homeImages/sbda.png"),
              name: "社保档案",
              status: true,
              url: "/socialSecurityArchives",
              parentid: "1",
            },
            {
              id: "1-6",
              imgurl: require("@/assets/images/homeImages/gzb.png"),
              name: "工资表",
              status: true,
              url: "/salarySheet",
              parentid: "1",
            },
            {
              id: "1-7",
              imgurl: require("@/assets/images/homeImages/kqgl.png"),
              name: "考勤管理",
              status: true,
              url: "/clocking-in",
              parentid: "1",
            },
            {
              id: "1-8",
              imgurl: require("@/assets/images/homeImages/kqtj.png"),
              name: "考勤统计",
              AuthorityName: "统计分析",
              status: true,
              url: "/statisticAnalysis",
              parentid: "1",
            },
          ],
        },
        {
          id: "2",
          imgurl: "",
          name: "进销存",
          AuthorityName: "进入进销存",
          status: true,
          children: [
            {
              id: "2-1",
              imgurl: require("@/assets/images/homeImages/cgrk.png"),
              name: "采购入库单",
              status: true,
              url: "/statisticAnalysis",
              parentid: "2",
            },
            {
              id: "2-2",
              imgurl: require("@/assets/images/homeImages/xsck.png"),
              name: "销售出库单",
              status: true,
              url: "/statisticAnalysis",
              parentid: "2",
            },
            {
              id: "2-3",
              imgurl: require("@/assets/images/homeImages/skd.png"),
              name: "收款单",
              status: true,
              url: "/statisticAnalysis",
              parentid: "2",
            },
            {
              id: "2-4",
              imgurl: require("@/assets/images/homeImages/fkd.png"),
              name: "付款单",
              status: true,
              url: "/statisticAnalysis",
              parentid: "2",
            },
            {
              id: "2-5",
              imgurl: require("@/assets/images/homeImages/rkdjb.png"),
              name: "入库单据表",
              status: true,
              url: "/statisticAnalysis",
              parentid: "2",
            },
            {
              id: "2-6",
              imgurl: require("@/assets/images/homeImages/ckdjb.png"),
              name: "出库单据表",
              status: true,
              url: "/statisticAnalysis",
              parentid: "2",
            },
          ],
        },
        {
          id: "3",
          imgurl: "",
          name: "财务",
          AuthorityName: "进入财务",
          status: true,
          children: [
            {
              id: "3-1",
              imgurl: require("@/assets/images/homeImages/scpz.png"),
              name: "生成凭证",
              status: true,
              url: "enterprise-unify-brief-generatevoucher",
              parentid: "3",
            },
            {
              id: "3-2",
              imgurl: require("@/assets/images/homeImages/lpz.png"),
              name: "录凭证",
              status: true,
              url: "enterprise-unify-brief-recordVoucher",
              parentid: "3",
            },
            {
              id: "3-3",
              imgurl: require("@/assets/images/homeImages/cpz.png"),
              name: "查凭证",
              status: true,
              url: "enterprise-unify-brief-checkVoucher",
              parentid: "3",
            },
            {
              id: "3-4",
              imgurl: require("@/assets/images/homeImages/yeb.png"),
              name: "余额表",
              AuthorityName: "科目余额表",
              status: true,
              url: "enterprise-unify-brief-subjectBalance",
              parentid: 3,
            },
            {
              id: "3-5",
              imgurl: require("@/assets/images/homeImages/zcfzb.png"),
              name: "资产负债表",
              status: true,
              url: "enterprise-unify-brief-balanceSheet",
              parentid: "3",
            },
            {
              id: "3-6",
              imgurl: require("@/assets/images/homeImages/lrb.png"),
              name: "利润表",
              status: true,
              url: "enterprise-unify-brief-profitStatement",
              parentid: "3",
            },
            {
              id: "3-7",
              imgurl: require("@/assets/images/homeImages/jz.png"),
              name: "结账",
              status: true,
              url: "enterprise-unify-brief-settleAccounts",
              parentid: "3",
            },
          ],
        },
        {
          id: "4",
          imgurl: "",
          name: "合并账套",
          AuthorityName: "合并账套",
          status: true,
          children: [
            {
              id: "4-1",
              imgurl: require("@/assets/images/homeImages/jz.png"),
              name: "查凭证",
              status: true,
              url: "checkVoucher",
              parentid: "4",
            },
            {
              id: "4-2",
              imgurl: require("@/assets/images/homeImages/mxz.png"),
              name: "明细账",
              status: true,
              url: "subsidiaryLedger",
              parentid: "4",
            },
            {
              id: "4-3",
              imgurl: require("@/assets/images/homeImages/hbyeb.png"),
              name: "合并余额表",
              status: true,
              url: "GroupBalanceSheet",
              parentid: "4",
            },
            {
              id: "4-4",
              imgurl: require("@/assets/images/homeImages/hbzcb.png"),
              name: "合并资产负债表",
              status: true,
              url: "balanceSheet",
              parentid: "4",
            },
            {
              id: "4-5",
              imgurl: require("@/assets/images/homeImages/hblrb.png"),
              name: "合并利润表",
              status: true,
              url: "profitStatement",
              parentid: "4",
            },
            {
              id: "4-6",
              imgurl: require("@/assets/images/homeImages/hbxjb.png"),
              name: "合并现金流量表",
              status: true,
              url: "statementCashFlow",
              parentid: "4",
            },
          ],
        },
        {
          id: "5",
          imgurl: "",
          name: "预算",
          AuthorityName: "进入预算",
          status: true,
          children: [
            {
              id: " 5-1",
              imgurl: require("@/assets/images/homeImages/ysfk.png"),
              name: "编制预算费控",
              status: true,
              url: "/statisticAnalysis",
              parentid: "5",
            },
            {
              id: " 5-2",
              imgurl: require("@/assets/images/homeImages/bzysfx.png"),
              name: "编制预算分析",
              status: true,
              url: "/statisticAnalysis",
              parentid: "5",
            },
            {
              id: " 5-3",
              imgurl: require("@/assets/images/homeImages/ystz.png"),
              name: "预算调整",
              status: true,
              url: "/statisticAnalysis",
              parentid: "5",
            },
            {
              id: "5-4",
              imgurl: require("@/assets/images/homeImages/ysdj.png"),
              name: "预算调剂",
              status: true,
              url: "/statisticAnalysis",
              parentid: "5",
            },
            {
              id: "5-5",
              imgurl: require("@/assets/images/homeImages/ysfx.png"),
              name: "预算执行分析表",
              status: true,
              url: "/statisticAnalysis",
              parentid: "5",
            },
          ],
        },
        {
          id: "6",
          imgurl: "",
          name: "人力资源0",
          AuthorityName: "人力资源",
          status: true,
          children: [
            {
              id: "1-1",
              imgurl: require("@/assets/images/homeImages/yghmc.png"),
              name: "员工花名册",
              AuthorityName: "员工花名册",
              status: true,
              url: "/employeeList",
              parentid: "1",
            },
            {
              id: "1-2",
              imgurl: require("@/assets/images/homeImages/blrz.png"),
              name: "办理入职",
              AuthorityName: "入职管理",
              status: true,
              url: "/induction",
              parentid: "1",
            },
            {
              id: "1-3",
              imgurl: require("@/assets/images/homeImages/bldd.png"),
              name: "办理调动",
              AuthorityName: "调动管理",
              status: true,
              url: "/redeploy",
              parentid: "1",
            },
            {
              id: "1-4",
              imgurl: require("@/assets/images/homeImages/dxtx.png"),
              name: "员工定薪调薪",
              status: true,
              url: "/employeeCompensation",
              parentid: "1",
            },
            {
              id: "1-5",
              imgurl: require("@/assets/images/homeImages/sbda.png"),
              name: "社保档案",
              status: true,
              url: "/socialSecurityArchives",
              parentid: "1",
            },
            {
              id: "1-6",
              imgurl: require("@/assets/images/homeImages/gzb.png"),
              name: "工资表",
              status: true,
              url: "/salarySheet",
              parentid: "1",
            },
            {
              id: "1-7",
              imgurl: require("@/assets/images/homeImages/kqgl.png"),
              name: "考勤管理",
              status: true,
              url: "/clocking-in",
              parentid: "1",
            },
            {
              id: "1-8",
              imgurl: require("@/assets/images/homeImages/kqtj.png"),
              name: "考勤统计",
              AuthorityName: "统计分析",
              status: true,
              url: "/statisticAnalysis",
              parentid: "1",
            },
          ],
        },
        {
          id: "7",
          imgurl: "",
          name: "人力资源1",
          AuthorityName: "人力资源",
          status: true,
          children: [
            {
              id: "1-1",
              imgurl: require("@/assets/images/homeImages/yghmc.png"),
              name: "员工花名册",
              AuthorityName: "员工花名册",
              status: true,
              url: "/employeeList",
              parentid: "1",
            },
            {
              id: "1-2",
              imgurl: require("@/assets/images/homeImages/blrz.png"),
              name: "办理入职",
              AuthorityName: "入职管理",
              status: true,
              url: "/induction",
              parentid: "1",
            },
            {
              id: "1-3",
              imgurl: require("@/assets/images/homeImages/bldd.png"),
              name: "办理调动",
              AuthorityName: "调动管理",
              status: true,
              url: "/redeploy",
              parentid: "1",
            },
            {
              id: "1-4",
              imgurl: require("@/assets/images/homeImages/dxtx.png"),
              name: "员工定薪调薪",
              status: true,
              url: "/employeeCompensation",
              parentid: "1",
            },
            {
              id: "1-5",
              imgurl: require("@/assets/images/homeImages/sbda.png"),
              name: "社保档案",
              status: true,
              url: "/socialSecurityArchives",
              parentid: "1",
            },
            {
              id: "1-6",
              imgurl: require("@/assets/images/homeImages/gzb.png"),
              name: "工资表",
              status: true,
              url: "/salarySheet",
              parentid: "1",
            },
            {
              id: "1-7",
              imgurl: require("@/assets/images/homeImages/kqgl.png"),
              name: "考勤管理",
              status: true,
              url: "/clocking-in",
              parentid: "1",
            },
            {
              id: "1-8",
              imgurl: require("@/assets/images/homeImages/kqtj.png"),
              name: "考勤统计",
              AuthorityName: "统计分析",
              status: true,
              url: "/statisticAnalysis",
              parentid: "1",
            },
          ],
        },
        {
          id: "8",
          imgurl: "",
          name: "人力资源2",
          AuthorityName: "人力资源",
          status: true,
          children: [
            {
              id: "1-1",
              imgurl: require("@/assets/images/homeImages/yghmc.png"),
              name: "员工花名册",
              AuthorityName: "员工花名册",
              status: true,
              url: "/employeeList",
              parentid: "1",
            },
            {
              id: "1-2",
              imgurl: require("@/assets/images/homeImages/blrz.png"),
              name: "办理入职",
              AuthorityName: "入职管理",
              status: true,
              url: "/induction",
              parentid: "1",
            },
            {
              id: "1-3",
              imgurl: require("@/assets/images/homeImages/bldd.png"),
              name: "办理调动",
              AuthorityName: "调动管理",
              status: true,
              url: "/redeploy",
              parentid: "1",
            },
            {
              id: "1-4",
              imgurl: require("@/assets/images/homeImages/dxtx.png"),
              name: "员工定薪调薪",
              status: true,
              url: "/employeeCompensation",
              parentid: "1",
            },
            {
              id: "1-5",
              imgurl: require("@/assets/images/homeImages/sbda.png"),
              name: "社保档案",
              status: true,
              url: "/socialSecurityArchives",
              parentid: "1",
            },
            {
              id: "1-6",
              imgurl: require("@/assets/images/homeImages/gzb.png"),
              name: "工资表",
              status: true,
              url: "/salarySheet",
              parentid: "1",
            },
            {
              id: "1-7",
              imgurl: require("@/assets/images/homeImages/kqgl.png"),
              name: "考勤管理",
              status: true,
              url: "/clocking-in",
              parentid: "1",
            },
            {
              id: "1-8",
              imgurl: require("@/assets/images/homeImages/kqtj.png"),
              name: "考勤统计",
              AuthorityName: "统计分析",
              status: true,
              url: "/statisticAnalysis",
              parentid: "1",
            },
          ],
        },
      ],
      activeIndex: 1,
      menu: [],
      salesId: "",
      balanceList: [],
      groupBalance: [],
    };
  },
  created() {
    this.getJurisdiction();
    this.ontabswitch();
  },
  mounted() {
    this.GetSubCompanyPageList();
    this.GetbooksList();
  },
  methods: {
    setrule() {
      this.menuList.map((item) => {
        item.status = this.RoleAuthority.some((idx) => idx.name == item.name || item.AuthorityName);
        if (item.id != "4" && item.id != "5") {
          item.children.map((el) => {
            el.status = this.RoleAuthority.some((idx) => idx.name == el.name || el.AuthorityName);
          });
        }
        item.status = !!item.children.find((m) => m.status);
      });
    },

    ontabswitch() {
      this.menuList.map((item) => {
        if (item.id == this.activeIndex) {
          this.menu = item.children;
        }
      });
    },

    ontab(type, index) {
      if (type == 0) {
        this.activeIndex = index;
      } else if (type == 1) {
        if (this.activeIndex < 8) {
          this.activeIndex++;
        }
      } else {
        if (this.activeIndex > 1) {
          this.activeIndex--;
        }
      }
      this.ontabswitch();
      let tarbar_el = document.getElementById("tarbar");
      let tarbar = tarbar_el.getBoundingClientRect();
      let tarbarView = [tarbar.left, tarbar.left + tarbar.width];
      let tarbar_id = document.getElementById("tarbar_" + this.activeIndex).getBoundingClientRect();
      let tarbar_idView = [tarbar_id.left, tarbar_id.left + tarbar_id.width];
      //判断选择的tabbar是否在可视区域内
      if (tarbarView[0] <= tarbar_idView[0] && tarbarView[1] >= tarbar_idView[1]) {
        //console.log("在可视区域");
      } else {
        tarbar_el.style["scroll-behavior"] = "smooth";
        if (tarbar_idView[0] < tarbarView[0]) {
          let scrollLeft = tarbar_el.scrollLeft;
          tarbar_el.scroll(scrollLeft - (tarbarView[0] - tarbar_idView[0]) - 10, 0);
        }
        if (tarbar_idView[1] > tarbarView[1]) {
          let scrollLeft = tarbar_el.scrollLeft;
          tarbar_el.scroll(scrollLeft + (tarbar_idView[1] - tarbarView[1]) + 10, 0);
        }
      }
    },
    //快捷菜单跳转
    onpush(items) {
      if (items.parentid == 1) {
        this.$router.push(`${items.url}`);
      } else if (items.parentid == 2) {
        let url = "";
        switch (items.name) {
          case "采购入库单":
            url = "#/rukumanagement/purchasewarehousing";
            break;
          case "销售出库单":
            url = "#/chukumanagement/salewarehousing";
            break;
          case "收款单":
            url = "#/bills/receipt";
            break;
          case "付款单":
            url = "#/bills/payment";
            break;
          case "入库单据表":
            url = "#/rukumanagement/orderdocument";
            break;
          case "出库单据表":
            url = "#/chukumanagement/saledocument";
            break;
          default:
            break;
        }
        this.goPurchase(url);
      } else if (items.parentid == 3) {
        this.fyEntertheaccount(items.url);
      } else if (items.parentid == 4) {
        this.GroupEntertheaccount(items.url);
      } else if (items.parentid == 5) {
        let url = "";
        switch (items.name) {
          case "编制预算费控":
            url = "#/budgeting";
            break;
          case "编制预算分析":
            url = "#/budgeting";
            break;
          case "预算调整":
            url = "#/budgetlist";
            break;
          case "预算调剂":
            url = "#/budgetlist";
            break;
          case "预算执行分析表":
            url = "#/budgetanalysis";
            break;
          default:
            break;
        }
        this.Intothebudget(this.userInfo, url);
      }
    },

    goPurchase(linkurl) {
      // 进入进销存
      let { subName, subid, psiId } = this.balanceList.find((m) => !!m.psiId);
      if (!psiId) {
        this.$message.warning("未创建进销存");
        return;
      }
      let getTokenParams = {
        companyNumber: this.userInfo.Serial,
        companyId: this.userInfo.CompanyId,
        userName: this.userInfo.realname,
        PSIID: psiId, // 进销存的ID
        Password: this.userInfo.UserId,
        departmentId: this.userInfo.departmentid,
        jurisdictionid: this.salesId,
        isadmin: this.userInfo.isadmin,
        smallType: this.userInfo.smallType, // 版本
        is_machine_accounts: false, // 是否开通智能做账 bool类型
        tax_inspection_surpluscount: 0, //  财税检测盈余数 int类型
        tax_number: 0, // 税号
        uif: this.uif,
        PSIName: subName,
        curmoterid: subid,
      };
      let url = webUrl.psi;
      // if (process.env.NODE_ENV == "checkTest" || process.env.NODE_ENV == "development") {
      //   url = "http://8.142.139.164:8086";
      // } else if (process.env.NODE_ENV == "pre") {
      //   url = "http://39.107.26.138:8086";
      // } else if (process.env.NODE_ENV == "prod") {
      //   url = "https://psi.yundaizhang.com.cn";
      // }else if (process.env.NODE_ENV == "prod") {
      //   url = "https://psi.zhangsanfeng.vip";
      // }
      url += this.setUrlParam("getTokenParams", escape(JSON.stringify(getTokenParams)));
      window.open(url + linkurl);
    },
    Intothebudget(item, linkurl) {
      // 进入预算
      let { subid, accountId } = this.balanceList;
      let url = webUrl.budget; //process.env.NODE_ENV == "checkTest" || process.env.NODE_ENV == "development" ? "http://8.142.139.164:55005" : process.env.NODE_ENV == "pre" ? "http://39.107.26.138:55005" : process.env.NODE_ENV == "prod" ? "https://budget.zhangsanfeng.vip:55005" : "https://budget-test.zhangsanfeng.vip";
      let src = url + "?token=" + this.uif + "&EnterpriseId=" + subid + "&ztId=" + accountId + "&random" + Math.random() * 100 + linkurl;
      window.open(src);
    },

    fyEntertheaccount(linkurl) {
      // 进入记账
      let item = this.balanceList.find((m) => !!m.accountId);
      let items = item.accountNameList[0];
      if (!item || !item.accountId) {
        this.$router.push({ name: "Financial", query: { subid: item.subid, abbreviationName: item.abbreviationName } });
        return;
      }
      this.EntertheaccountPortal(items.accountId, item.subid, item, linkurl);
    },
    GetSubCompanyPageList() {
      // 获取子公司列表
      this.setrule();
      let params = {
        pageIndex: 1,
        pageSize: -1,
      };

      this.$api.companyInfo
        .GetSubCompanyPageList(params)
        .then((res) => {
          this.balanceList = res.data.data.items;
        })
        .catch(() => {});
    },
    getJurisdiction() {
      // 获取权限数据
      let item = this.RoleAuthority.find(item => {
        return item.name == '企业管理';
      });
      let moduleId = item?.id;
      this.RoleAuthority.forEach((item) => {
        if (item.name == "进入进销存") {
          this.salesId = item.id; // 进销存权限id
        }
        if (item.parentid == moduleId && item.name == '进入财务') {
          this.$store.commit('companyInfo/setFinanceId', item.id);// 财务权限id
        }
      });
    },
    //获取合并账套
    GetbooksList() {
      // 获取账套列表
      let dataParams = {
        pageIndex: 1, // 默认页码
        pageSize: 1, // 默认列表条数
      };
      this.$api.bloc.GetGroupPageList(dataParams).then((res) => {
        let result = res.data.data;
        if (result.status == 200) {
          this.groupBalance = result.items;
        }
      });
    },
    // 进入合并账套
    GroupEntertheaccount(url) {
      if (this.groupBalance && this.groupBalance.length > 0) {
        let row = this.groupBalance[0];
        let params = {
          groupid: row.groupid,
          accountid: row.accountList[0].accountid,
        };
        this.$api.bloc.IntoAccount(params).then((res) => {
          let result = res.data;
          if (result.status == 200) {
            let urlstr = result.data.url;
            // CurrentVersion: "1"
            let ztInfos = [];
            row.accountList.map((item) => {
              ztInfos.push({
                ZTID: item.accountid,
                ZTName: item.accountName,
                CustomerId: item.subid,
              });
            });
            let tokenParams = {
              ZtID: params.accountid,
              userName: this.userInfo.realname,
              companyId: this.userInfo.CompanyId,
              companyNumber: this.userInfo.Serial,
              userId: this.userInfo.UserId,
              sign: result.data.sign,
              ZTGroupId: row.groupid,
              customerId: row.companyid, // 公司id
              accountingSystemId: row.accountingSystemId,
              IsUnify: true,
              uif: this.uif,
              groupName: row.groupName,
              ztInfos,
              routerName: url,
            };
            //console.log(tokenParams, "tokenParams");
            urlstr += this.setUrlParam("tokenParams", escape(JSON.stringify(tokenParams)));
            window.open(urlstr);
          }
        });
      } else {
        this.$message.warning("未创建集团账套");
      }
    },
  },
};
</script>
<style lang="less" scoped>
#homeMenus {
  padding: 0px 10px;
  height: 100%;
  padding: 10px 0px;
  ul {
    height: calc(100% - 50px);
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    padding-bottom: 20px;

    li {
      width: 25%;
      font-size: 13px;
      color: #303133;
      padding-top: 10px;

      cursor: pointer;
      img {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        transform: scale(0.7);
        margin: auto;
      }
      p {
        text-align: center;
      }
    }
  }
  // margin-top: 20px;
  .grid-mark-header {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #edeef2;
    font-size: 14px;
    position: relative;
    padding-left: 15px;
    display: flex;
    justify-content: space-between;

    @media screen and (min-width: 0px) and (max-width: 1400px) {
      .tarbar {
        width: 195px;
        display: inline-block;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        height: 40px;
        margin-right: 10px;
        .active-color {
          color: #40a5ea;
        }
      }
    }
    @media screen and (min-width: 1401px) {
      .tarbar {
        width: 350px;
        display: inline-block;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        height: 40px;
        margin-right: 10px;
        .active-color {
          color: #40a5ea;
        }
      }
    }
    .tarbar::-webkit-scrollbar {
      /*高宽分别对应横竖滚动条的尺寸*/
      width: 0px !important;
      height: 0px !important;
    }
    .el-icon-arrow-right {
      line-height: 40px;
    }
    .el-icon-arrow-left {
      line-height: 40px;
    }

    .icon {
      cursor: pointer;
      line-height: 40px;

      i {
        transform: rotate(90deg);
      }
    }
    // 小竖线图标
    .vertical {
      display: inline-block;
      height: 14px;
      border-left: 3px solid #85a9f5;
      color: black;
      position: absolute;
      top: 14px;
      left: 6px;
      border-radius: 10px;
    }
  }
}
</style>
